<template>
    <div class="con_8">
      <div class="c_item c_line">
        <h3>监听单个基本类型(ref)</h3>
        <input v-model="a" />
        <br />
        <span v-text="'a: ' + a"></span>
      </div>
      <div class="c_item c_line">
        <h3>监听多个基本类型(ref)</h3>
        <input v-model="b" />
        <br />
        <span v-text="'b: ' + b"></span>
        <br />
        <input v-model="c" />
        <br />
        <span v-text="'c: ' + c"></span>
      </div>
      <div class="c_item c_line">
        <h3>监听单个引用类型(reactive)</h3>
        <input v-model="d.first.second.third" />
        <br />
        <input v-model="d.first.second.fouth" />
        <br />
        <span v-text="'d_fir: ' + d.first.second.third"></span>
        <br />
        <span v-text="'d_sec: ' + d.first.second.fouth"></span>
      </div>
      <div class="c_item c_line">
        <h3>监听单个引用类型(ref)</h3>
        <input v-model="e.first.second.third" />
        <br />
        <input v-model="e.first.second.fouth" />
        <br />
        <span v-text="'e_fir: ' + e.first.second.third"></span>
        <br />
        <span v-text="'e_sec: ' + e.first.second.fouth"></span>
      </div>
      <div class="c_item c_line c_line2">
        <h3>监听单个引用类型(reactive)，只监听对象中的一个属性</h3>
        <input v-model="f.first.second.third" />
        <br />
        <input v-model="f.first.second.fouth" />
        <br />
        <span v-text="'f_fir: ' + f.first.second.third"></span>
        <br />
        <span v-text="'f_sec: ' + f.first.second.fouth"></span>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
  import { ref, reactive, watch } from "vue";
  
  // 单个基本类型监听
  const a = ref<string>("hello");
  watch(
    a,
    (newValue, oldValue) => {
      console.log("newValue:" + newValue);
      console.log("oldValue:" + oldValue);
    },
    { immediate: false }
  );
  
  // 多个基本类型监听
  const b = ref<string>("yt_b");
  const c = ref<string>("yt_c");
  watch([b, c], (v1, v2) => {
    console.log("newValue:" + v1);
    console.log("oldValue:" + v2);
  });
  
  interface myInfo {
    first: {
      second: {
        third: string;
        fouth: number;
      };
    };
  }
  
  // 单个引用类型reactive，默认开启了深层监听deep,多个属性全部监听,新值旧值一样
  const d: myInfo = reactive<myInfo>({
    first: { second: { third: "", fouth: 0 } },
  });
  watch(d, (v1, v2) => {
    console.log(
      "newValue  d_fir: " +
        v1.first.second.third +
        ",d_sec: " +
        v1.first.second.fouth
    );
    console.log(
      "oldValue  d_fir: " +
        v2.first.second.third +
        ",d_sec: " +
        v2.first.second.fouth
    );
  });
  
  // 单个引用类型ref,默认未开启深层监听deep
  const e = ref<myInfo>({ first: { second: { third: "", fouth: 0 } } });
  watch(
    e,
    (v1, v2) => {
      console.log(
        "newValue  e_fir: " +
          v1.first.second.third +
          ",e_sec: " +
          v1.first.second.fouth
      );
      console.log(
        "oldValue  e_fir: " +
          v2.first.second.third +
          ",e__sec: " +
          v2.first.second.fouth
      );
    },
    { deep: true }
  );
  
  // 监听对象有多个属性，只监听一个属性
  const f: myInfo = reactive<myInfo>({
    first: { second: { third: "hello", fouth: 66 } },
  });
  watch(
    () => f.first.second.third,
    (v1, v2) => {
      console.log("newValue:" + v1);
      console.log("oldValue:" + v2);
    }
  );
  </script>
  
  <style scoped>
  .con_8 {
    display: flex;
    flex-wrap: wrap;
  }
  .c_item {
    margin: 10px 0 0 0;
    width: 100%;
  }
  
  .c_line {
    border-top: 2px solid #0081cc;
    padding-top: 10px;
  }
  
  .c_line2 {
    border-bottom: 2px solid #0081cc;
    padding-bottom: 10px;
  }
  </style>
  